<% content_for :javascript do %>
  <%= javascript_include_tag 'cropper' %>
  <script type="text/javascript" charset="utf-8">
    function onEndCrop( coords, dimensions ) {
      $( 'x1' ).value = coords.x1;
      $( 'y1' ).value = coords.y1;
      $( 'x2' ).value = coords.x2;
      $( 'y2' ).value = coords.y2;
      $( 'width' ).value = dimensions.width;
      $( 'height' ).value = dimensions.height;
    }    
  </script>
<% end %>
<% content_for :css do %>
  <%= stylesheet_link_tag 'new_or_edit','user_logos_edit','cropper' %>
<% end %>
<%= render :file => 'users/_level2_nav_bar.html', :locals => { :item => :personal_info} %>
<div id='new_user_logo'>
  <div class='left new_or_edit'>
    <div class='logo' style='margin-left:<%= (1000 - @logo.image_width)/2 %>px;'>
      <%= current_user_logo_image_tag :id => :user_logo %>
      <script type="text/javascript" charset="utf-8">
        Event.observe( window, 'load', function() {
            new Cropper.Img(
                'user_logo',
                { 
                  minWidth:100,
                  minHeight:120,
                  maxWidth:<%= @logo.image_width %>,
                  maxHeight:<%= @logo.image_height %>,
                  ratioDim: { x: 100, y: 120 },
                  displayOnInit:true,
                  onEndCrop: onEndCrop                   
                }
            );
        } );        
      </script>
    </div>
    <div class='buttons'>
      <%= link_to_function "选好了，保存下来", "$('edit_user_logo_form').submit()", :class => :submit %>      
      <%= link_to "重新上传，换一张脸", new_user_logo_url, :class => :other, :title => '重新选一幅图做为头像' %>
      <%= link_to '返回大拼盘', user_url(current_user), :class => :return %>
    </div>
  </div>
  <div class='right'>
    <div class='form'>
    <% form_for @logo,
         :html => {
          :id => :edit_user_logo_form
         } do |f| %>
      <dl>
        <dt>X1：</dt>
        <dd><%= text_field_tag 'x1' %></dd>
      </dl>
      <dl>
        <dt>Y1：</dt>
        <dd><%= text_field_tag 'y1' %></dd>
      </dl>
      <dl>
        <dt>X2：</dt>
        <dd><%= text_field_tag 'x2' %></dd>
      </dl>
      <dl>
        <dt>Y2：</dt>
        <dd><%= text_field_tag 'y2' %></dd>
      </dl>
      <dl>
        <dt>Hidth：</dt>
        <dd><%= text_field_tag 'width' %></dd>
      </dl>
      <dl>
        <dt>Height：</dt>
        <dd><%= text_field_tag 'height' %></dd>
      </dl>
    <% end %>      
    </div>    
  </div>
</div> 